import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'
import CurrencySelect from '../../../components/commons/CurrencySelect'

import moment from 'moment'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const dateFormat = 'YYYY-MM-DD';
const view= "view"
const edit="edit"
export default Form.create({wrappedComponentRef: true})(class EditAgencyagreement extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            open: false,
            disabled: true,
            type: "1",
            feeMethod:"1",
        };

    }



    handleResetFields = () => {
        this.props.form.resetFields();
        this.setState({type:"1"});
        this.props.dispatch({
            type: 'customerManage/setAgencyagreement',
            payload: {
                agencyagreement: "",
            }
        });
    }


    handleCancel = () => {
        this.setState({open:false});
        this.handleResetFields();
    }

    handleOpen = (type) => {
        this.state.type = type;
        this.setState({open: true})

    }


    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            if (errors) {
                return;
            }
            let functionname = "";
            if (this.state.type == "add") {
                functionname = "addAgencyagreement";

            } else if (this.state.type == "edit") {
                functionname = "updateAgencyagreement";
            }else {
                return;
            }
            this.props.dispatch({
                type: 'customerManage/' + functionname,
                payload: {
                    id: R.isNil(this.props.dataSource) ? "" : this.props.dataSource.id,
                    signdate: values.signdate.format(dateFormat),
                    agencyfee: values.agencyfee,
                    percentfee:values.percentfee,
                    feeMethod:values.feeMethod,
                    foreignexratio: values.foreignexratio,
                    cstnote: values.cstnote,
                    cstid: this.props.cstid,
                    agencyno: values.agencyno,
                    onSuccess:()=>{
                    }
                }
            });

            this.handleCancel();
        })
    };
    hanleSelectMethod=(value)=>{
        this.setState({feeMethod:value});

    }

    render() {
        const { getFieldDecorator } = this.props.form;
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 9 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
        };

        const formItemLayout2 = {
            labelCol: {span: 4},
            wrapperCol: {span: 20}
        };

        let footer=[];

        let title="添加客户代理协议:";
        if(dataSource.agencyfee&&(dataSource.feeMethod=="1"||this.state.feeMethod=="1")) {
            title = <span>添加客户代理协议:<span style={{color: 'red'}}>&nbsp;&nbsp;代理费收费标准&nbsp;(1美金收取{dataSource.agencyfee}分人民币)</span></span>;
        }
        if(dataSource.percentfee&&(dataSource.feeMethod=="2"||this.state.feeMethod=="2"))
        {
            title = <span>添加客户代理协议:<span style={{color: 'red'}}>&nbsp;&nbsp;代理费收费标准&nbsp;(收取退税额的{dataSource.percentfee}%)</span></span>;
        }


            if(!(this.props.disabled || this.state.type == view)){
                footer.push(<Button size="large" onClick={this.handleConfirm.bind(this, true)}>保存</Button>);
                footer.push(<Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>);

            }else{footer.push(<Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>);}

            let selectMethod;
            if(R.isNil(dataSource.percentfee)&&R.isNil(dataSource.agencyfee)&&R.isNil(dataSource.feeMethod)){
                selectMethod=this.state.feeMethod;
            }else{
                selectMethod=dataSource.feeMethod;
            }

        return (

            <Modal visible={this.state.open} title={title}  width={800} wrapClassName="vertical-center-modal"
                onCancel={this.handleCancel} footer={footer} >

                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="收费方式"
                                hasFeedback
                            >
                                {getFieldDecorator('feeMethod', {
                                    rules: [{
                                        required: true, message: '请选择代理费收费标准',
                                    }],
                                    initialValue: selectMethod
                                })(
                                    <Select disabled={this.props.disabled || this.state.type == view} onSelect={this.hanleSelectMethod.bind(this)}>
                                        <Option value="1">按1美元收取</Option>
                                        <Option value="2">按退税额百分比</Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                        {
                            this.state.feeMethod=="1"?
                            <Col span={12}>
                                <FormItem
                        {...formItemLayout}
                            label="代理费收费标准(分)"
                            hasFeedback
                            >
                        {getFieldDecorator('agencyfee', {
                            rules: [{
                            required: true, message: '请输入代理费收费标准',
                        }],
                            initialValue: dataSource.agencyfee

                        })(
                            <InputNumber placeholder={"1美金收取x分人民币"} min={1} style={{width: 182}} disabled={this.props.disabled || this.state.type == view} maxLength="18"/>
                            )}
                            </FormItem>
                            </Col>
                            :
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="代理费收费标准(%)"
                                    hasFeedback
                                >
                                    {getFieldDecorator('percentfee', {
                                        rules: [{
                                            required: true, message: '请输入代理费收费标准',
                                        }],
                                        initialValue: dataSource.percentfee

                                    })(
                                        <InputNumber placeholder={"退税额的百分比"} style={{width: 182}} disabled={this.props.disabled || this.state.type == view} maxLength="18"/>
                                    )}
                                </FormItem>
                            </Col>

                        }


                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="外汇抵押比例(%)"
                                hasFeedback
                            >
                                {getFieldDecorator('foreignexratio', {
                                    rules: [{
                                        required: true, message: '外汇抵押比例！',
                                    }],
                                    initialValue: dataSource.foreignexratio
                                })(
                                    <InputNumber style={{width: 182}} max={100} min={0} disabled={this.props.disabled || this.state.type == view} maxLength="18"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="签约日期"
                                hasFeedback
                            >
                                {getFieldDecorator('signdate', {
                                    rules: [{
                                        required: true, message: '请输入签约日期！',
                                    }],
                                    initialValue: dataSource.signdate== undefined ? '' : moment(dataSource.signdate, dateFormat)
                                })(
                                    <DatePicker style={{width: 182}} disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>

                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="客户注意事项"
                                hasFeedback
                            >
                                {getFieldDecorator('cstnote', {
/*                                     rules: [{
                                        required: true, message: '请输入客户注意事项！',
                                    }], */
                                    initialValue: dataSource.cstnote
                                })(
                                    <Input disabled={this.props.disabled || this.state.type == view} maxLength="300"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="协议号"
                                hasFeedback
                            >
                                {getFieldDecorator('agencyno', {
                                    rules: [{
                                        required: false, message: '请填写协议号！',
                                    }],
                                    initialValue: dataSource.agencyno
                                })(
                                    <Input disabled={dataSource.agencyno ? true : false} maxLength="50"/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>





                </Form>
            </Modal>
        )
    }
})


// WEBPACK FOOTER //
// ./public/src/components/customer/components/EditAgencyagreement.js